<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/ad-gallery/jquery.ad-gallery.css">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .example {
            border: 1px solid #CCC;
            background: #f2f2f2;
            padding: 10px;
        }


        pre {
            font-family: "Lucida Console", "Courier New", Verdana;
            border: 1px solid #CCC;
            background: #f2f2f2;
            padding: 10px;
        }

        code {
            font-family: "Lucida Console", "Courier New", Verdana;
            margin: 0;
            padding: 0;
        }

        #gallery {
            padding: 30px;
            background: #e1eef5;
        }

        .ad-thumb-list li a img {
            max-height: 5vw;
        }

        #ad-slideshow-controls {
            display: none;
        }

        #head {
            margin: 0;
            width: 100%;
            display: flex;
            background-color: darkgrey;
            align-items: center;
        }

        #logo {
            padding: 0 20px;
            display: flex;
            flex-grow: 1;
        }

        #logo img {
            padding: 10px;
        }

        #head div {
            padding: 0 10px;
        }

        #logo h1 {
            color: white;
        }

        button {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            border: 1px solid transparent;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border-radius: 2px;
            cursor: pointer;
        }

        #title {
            margin-top: 10px;
            padding: 15px;
            line-height: 1.3;
            border-left: 5px solid #5FB878;
            border-radius: 0 2px 2px 0;
            background-color: #FAFAFA;
        }

        #title p {
            font-size: 2rem;
        }

        #detail {
            margin: 10px;
            padding: 15px;
            line-height: 1.1;
            border-left: 5px solid #5FB878;
            border-radius: 0 2px 2px 0;
            background-color: #FAFAFA;
        }

        #content {
            margin: 0 auto;
        }

        #container {
            margin: 0 auto;
            padding: 10px;
        }

        #comment {
            margin-top: 3rem;
            flex-grow: 1;
        }

        textarea {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit;
            outline: 0;
            -webkit-appearance: none;
            -webkit-transition: all .3s;
            box-sizing: border-box;
            position: relative;
            border-color: #eee;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
            display: block;
            width: 100%;
            min-height: 100px;
            height: auto;
            line-height: 20px;
            padding: 6px 10px;
            resize: vertical;
        }

        #post button {
            margin: 10px 0;
        }

        #floors {
            max-height: 35vw;
            overflow-y: scroll;
        }

        #floors p {
            height: 100vh;
        }

        .user_show {
            line-height: 2rem;
            margin: 0 auto;
            width: 100%;
            height: 2rem;
            /* border: 1px solid #c0c0c0; */
            background-color: #fff;
        }

        .sign {
            height: 2rem;
            display: flex;
            justify-content: flex-start;
            line-height: 2rem;
        }

        .sign_detial {
            display: flex;
            justify-content: flex-start;
            margin-left: 0.5rem;
        }

        .label_ {
            border: 1px solid #1E9FFF;
        }

        .price {
            background-color: #fff;
            width: 100%;
            float: right;
        }

        .right_ {
            float: right;
        }

        .plople {
            width: 100%;
            display: flex;
            justify-content: flex-start;
        }

        .comment_head {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            overflow: hidden;
        }

        .name {
            margin-top: 20px;
            margin-left: -10px;
            color: darkgrey;
        }

    </style>
    <script src="../js/url-config.js"></script>
</head>

<body>
<div id="head">
    <div id="logo">
        <img src="http://www.henu.edu.cn/images/index/henu.png">
        <h1>档案馆</h1>
    </div>
    <div>
        <button id="btn-to-home">首页</button>
        <button id="btn-back">返回</button>
    </div>
</div>
<div id="title">
    <p id="titleText">
    </p>
</div>
<div id="content">
    <div id="container">
        <div id="gallery" class="ad-gallery" style="display: inline-block">
            <div class="ad-image-wrapper">
            </div>
            <div class="ad-controls">
            </div>
            <div class="ad-nav">
                <div class="ad-thumbs">
                    <ul class="ad-thumb-list" id="img-list">
                    </ul>
                </div>
            </div>
        </div>
        <div id="author-info" style="display: inline-block;">
            <p>作者：<span id="author-name"></span></p>
            <p>学号：<span id="author-userName"></span></p>
            <p>院校：<span id="author-college"></span></p>
            <p>专业：<span id="author-major"></span></p>

        </div>
    </div>

    <div id="detail">
        <p id="detailText">
        </p>
    </div>

    <div class="user_show">
        <div class="sign">
            <h2>标签分类:</h2>
            <div class="sign_detial" id="tag-body">
<!--                <p class="label_">青春</p>-->
            </div>
        </div>
    </div>
    <div class="price">
        <div class="layui-btn-group right_">
            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise1" style="border: none;">
                <i class="fa fa-thumbs-o-up" aria-hidden="true" id="like-btn"></i>
            </button>
            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">
                <i class="fa fa-eye" id="view-btn"></i>
            </button>
        </div>
    </div>
    <div id="show_people_name" class="height:300px">
<!--        <hr class="layui-border-cyan">-->
<!--        <hr class="layui-border-cyan">-->
        <div id="comment">
            <div id="post">
                <textarea></textarea>
                <button>发表评论</button>
            </div>
            <div id="floors">
                <!--                <div class="plople">-->
                <!--                    <div class="comment_head">-->
                <!--                    </div>-->
                <!--                    <div class="words">-->
                <!--                        <div class="name">人海</div>-->
                <!--                        <div>太赞了</div>-->
                <!--                    </div>-->
                <!--                </div>-->
            </div>
        </div>
    </div>


</div>
    <script>
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }

        var albumType;
        var albumId;
        if (getQueryVariable('albumId') !== false) {
            albumType = 'personal';
            albumId = getQueryVariable('albumId');
        } else if (getQueryVariable('SchoolAlbumId') !== false) {
            albumType = 'school';
            albumId = getQueryVariable('SchoolAlbumId');
        } else if (getQueryVariable('GruopAlbumId') !== false) {
            albumType = 'group';
            albumId = getQueryVariable('GruopAlbumId');
        }
        var albumData;
        var albumResources;
        var getDeatilUrl;
        if (albumType === 'school') {
            getDeatilUrl = BasePath + "api/SchoolAlbum/" + albumId + "/detail";
            // getDeatilUrl = BasePath + "api/PersonalAlbum/" + albumId;
        } else if (albumType === 'personal') {
            getDeatilUrl = BasePath + "api/PersonalAlbum/" + albumId;
        }
        try{
            //获取相册基本数据
            $.ajax({
                type: "GET",
                crossDomain: true,
                url: getDeatilUrl,
                contentType: "application/json",
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                success: function (message) {
                    albumData = message.data;
                    console.log(message);
                    //相册基本信息初始化
                    $('#titleText').text(albumData.title);
                    $('#detailText').text(albumData.description);
                    //设置点赞数
                    $("#like-btn").text(albumData.likeCount);
                    if(albumType!=="personal"){
                        return
                    }

                    //作者相关数据
                    $.ajax({
                        type: "GET",
                        crossDomain: true,
                        url: BasePath + "api/Account/" + albumData.creatorId,
                        contentType: "application/json",
                        dataType: "json",
                        xhrFields: {
                            withCredentials: true
                        },
                        success: function (message) {
                            //作者信息
                            $("#author-name").text(message.data.fullName);
                            $("#author-userName").text(message.data.userName);
                            $("#author-college").text(message.data.college.name);
                            $("#author-major").text(message.data.major.name)
                        },
                        error: function (message) {
                            console.log(message.responseJSON);
                        }
                    });

                },
                error: function (message) {
                    console.log(message.responseJSON);
                },
            });
        }catch (e){
            console.log(e)
        }


        var tags=new Set();
        //获取相册资源
        $.ajax({
            type: "GET",
            crossDomain: true,
            async: false,
            url: BasePath + "api/Album/" + albumId + "/resources",
            contentType: "application/json",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            success: function (message) {
                albumResources = message.data;
                console.log(message);
                //相册资源初始化
                albumResources.forEach(function (res) {
                    console.log(res.resourceType)
                    //设置查看数
                    $("#view-btn").text(res.downloadCount)
                    //tag
                    res.tags.forEach(function (tag) {
                        tags.add(tag.name);
                    })
                    if (res.resourceType === 0) {
                        $("#img-list").append(
                            '<li>' +
                            '<a href="' + BasePath +
                            'api/resource/' + res.resourceId +
                            '">' +
                            '<img src="' + BasePath +
                            'api/resource/' + res.resourceId +
                            '" title="' +
                            res.resourceTitle +
                            '" longdesc="' +
                            res.resourceDescription +
                            '">' +
                            '</a>' +
                            '</li>');
                    }

                });
            },
            error: function (message) {
                console.log(message.responseJSON);
            },
        });
        //设置tag
        tags.forEach(function (tag) {
            $('#tag-body').append('<p class="label_"> '+tag+' </p>')
        })

        //获取相册评论
        var commentData;
        $.ajax({
            type: "GET",
            crossDomain: true,
            url: BasePath + 'api/Album/' + albumId + '/Comments',
            contentType: "application/json",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            success: function (message) {
                commentData = message.data;
                console.log(message);
                commentData.forEach(function (data) {
                    $("#floors").append('<div class="plople">\n' +
                        '                    <div class="comment_head">\n' +
                        '                    </div>\n' +
                        '                    <div class="words">\n' +
                        '                        <div class="name">' + data.commentator.name + '</div>\n' +
                        '                        <div>' + data.content + '</div>\n' +
                        '                    </div>\n' +
                        '                </div>')
                })

            },
            error: function (message) {
                console.log(message.responseJSON);

            },
        });

        //发表评论监听
        $('#post button').click(function () {
            $.ajax({
                type: "POST",
                crossDomain: true,
                url: BasePath + 'api/Album/AddComment',
                contentType: "application/json",
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                data: JSON.stringify({
                    "albumid": albumId,
                    "content": $('#post textarea').val()
                }),
                success: function (message) {
                    commentData = message.data;
                    console.log(message);
                    location.reload()

                },
                error: function (message) {
                    console.log(message.responseJSON);

                },
            });
        })


    </script>
    <script type="text/javascript" src="../js/ad-gallery/jquery.ad-gallery.pack.js"></script>
    <script type="text/javascript">
        var galleries = $('.ad-gallery').adGallery();
        $('#switch-effect').change(
            function () {
                galleries[0].settings.effect = $(this).val();
                return false;
            }
        );
        $('#toggle-slideshow').click(
            function () {
                galleries[0].slideshow.toggle();
                return false;
            }
        );
        $(function () {

        });

        $('.ad-forward').hide();
        $('.ad-back').hide();
    </script>
    <script>
        //顶部按钮
        $("#btn-to-home").click(function (){
            window.location.href=BasePath;
        });
        $('#btn-back').click(function (){
            window.history.back();
        })
        //不知道为什么会有一个width参数，将他设为unset
        $(document).ready(function (){
            window.setInterval(function(){
                $('#img-list').css("width","unset")
            },1000);
        });
        //点赞事件
        function ilikeit(id) {
            try {
                $.ajax({
                    type: "POST",
                    crossDomain:true,
                    async:false,
                    url: BasePath+"api/Album/"+id+"/Like",
                    contentType: "application/json",
                    dataType:"json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success:function (message) {
                        alert('点赞成功');
                        location.reload();
                    },
                    error:function (message) {
                        console.log(message.responseJSON);
                    },
                });
            }catch (e) {
                console.log(e)
            }
        }
        $("#like-btn").click(function (){
            ilikeit(albumId);
        });
    </script>


</body>
<style>

</style>

</html>